<script lang="ts" setup>
import type { FormInstance } from '@arco-design/web-vue'
import type { AreaItem } from '@/apis/model/resolve'
// import {
//   addApiResolveRegionApi,
//   updateApiResolveRegionApi,
// } from '@/apis/modules/resolve/area'
import { getCertCnameApi } from '@/apis/modules/cert.ts'
// import { getApiResolveDomainsApi } from '@/apis/modules/resolve/domain'
import { commonTableProps } from '@/utils/table'

interface IProp {
  record?: AreaItem
}
const props = withDefaults(defineProps<IProp>(), {})
const emit = defineEmits(['reload'])
const visible = defineModel<boolean>('visible', { required: true })

const formRef = ref<FormInstance>()
// const dnsNameOptions = ref<LabelValue[]>([])

const tableColumns = buildColumns([
  {
    title: '主机记录',
    dataIndex: 'name',
    slotName: 'name',
    // format: 'copy',
  },
  {
    title: '记录类型',
    dataIndex: 'brand',
    slotName: 'brand',
    width: 120,
  },

  {
    title: '记录值',
    dataIndex: 'target',
    slotName: 'target',
    format: 'copy',
  },
])

// const queryParams = ref({ region_id: '', name: '' })
const { data: tableData } = useListRequest(getCertCnameApi, {
  params: {
    id: props.record?.id,
    limit: 1000,
  },
  immediate: true,
})

function truncationDomain(cname: string) {
  const parts = cname.split('.')
  if (parts.length <= 2) {
    return ''
  }
  parts.splice(parts.length - 2, 2)
  return parts.join('.')
}

async function handleOpen() {
  // console.log(props.record)
  // const res = await getCertCnameApi({ limit: 0 })
  // try {
  //   const res = await getComputeMachineGroupDetailApi({ limit: 0 })
  //   const list = res.list ?? []
  //   dnsNameOptions.value = list
  //     .map(item => ({ label: item.name!, value: item.id! }))
  //     .filter(Boolean)
  // } catch (error) {
  //   console.error(error)
  // }
  // if (props.record) {
  //   formState.value.dns_api_id = props.record.dns_api_id!
  //   formState.value.name = props.record.name!
  //   formState.value.remark = props.record.remark!
  // }
}
// async function handleSubmit() {
//   const error = await formRef.value?.validate()
//   if (error)
//     return false

//   const fn = props.record
//     ? updateComputeMachineGroupApi
//     : addComputeMachineGroupApi
//   const data = props.record
//     ? { id: props.record.id!, ...formState.value }
//     : formState.value
//   await fn(data).then(() => {
//     Message.success('操作成功')
//     visible.value = false
//     emit('reload')
//   })
// }

function handleClose() {
  formRef.value?.resetFields()
}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    title="验证模式"
    :width="720"
    :mask-closable="false"
    :before-open="handleOpen"
    :before-ok="handleClose"
    :before-close="handleClose"
    cancel-text="关闭"
    :hide-cancel="true"
    ok-text="关闭"
  >
    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
    >
      <template #brand>
        <span>CNAME</span>
      </template>
      <template #name="{ record }">
        <copy-field
          mouse-over
          :content="truncationDomain(record?.name || '-')"
        >
          {{ record?.name || '-' }}
        </copy-field>
      </template>
      <!-- <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openEditorDialog(record)"
        >
          <i-icons-log size="16px" />
        </a-link>
      </template> -->
    </a-table>
  </resource-dialog>
</template>
